<!DOCTYPE html>

<div id="tbclass_table_div">
	<!-- 查询窗口 -->
	<div class="modal fade" id="class_search" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">查询</h4>
				</div>
				<div class="modal-body">
					<!-- 以下为要查询的的内容 -->
					<div class="form-group text-center">
						<select id="bjyear" name="year" class="selectpicker"
							onchange="bjcxyear()" data-bind="value:queryCondition.year">
							<option style="display: none;"></option>
						</select>
						<select id="search_college" name="college" class="selectpicker"
							onchange="bjcxprofesion()"
							data-bind="value:queryCondition.college">
							<option style="display: none;"></option>
						</select> 
						 <select id="bjprofesion" name="profesion" class="selectpicker"
							data-bind="value:queryCondition.profesion">
							<option style="display: none;"></option>
						</select> 
					</div>
					<!-- 以上为要查询的内容 -->
				</div>
				<div class="modal-footer">
					<button type="button" id="bjcx" class="btn btn-primary"
						data-dismiss="modal" data-bind="click:queryClick">
						<span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询
					</button>
					<button type="button" class="btn btn-default" data-dismiss="modal"
						data-bind="click:clearClick" onclick="cleanSearch()">
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 工具栏 -->
	<div id="toolbar" class="btn-group">
		<button data-bind="click:addClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		</button>
		<button data-bind="click:editClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
		</button>
		<button data-bind="click:deleteClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		</button>
		<button data-bind="click:searchClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
		</button>

	</div>

	<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
	<table id="mytable" data-bind="bootstrapTable:$root">
		<thead>
			<tr>
				<th data-checkbox="true"></th>
				<th data-field="year">年级</th>
				<th data-field="profesion">专业</th>
				<th data-field="name">班级名字</th>
				<th data-field="number">班级人数</th>
			</tr>
		</thead>
	</table>
</div>


<!-- 以下是javascript内容 -->
<script type="text/javascript">
$('#bjyear').selectpicker({
	title:'选择年级',
	width:'fit'
});
$('#bjprofesion').selectpicker({
	title:'选择专业',
	width:'fit'
});
$('#search_college').selectpicker({
	title:'选择学院',
	width:'fit'
});
$(function(){
    var data =  {
	    tableParams : {
	    	url : 'tbclass/page'
	    	},
	    	urls : {
	    		delete : 'tbclass/delete',
	    		update : 'tbclass/edit',
	    		add : 'tbclass/edit',
	    		search:'tbclass/search'
	    	},
	    	queryCondition : {
	    		year : '',
	    		profesion : '',
	    		name : ''
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('tbclass_table_div'));	
	
});
function typeformatter(value,row,index){
	return value==0?'平时考核':'期末考试';
}

	//查询加载所有的年级
	$(function(){
		$.post('tbclass/year',function(data){
			 for (var i = 0; i < data.length; i++){
	   			$('#bjyear').append("<option value=" + data[i] + "> "+data[i] +"</option>"); 
	   	}
			 $('#bjyear').selectpicker('refresh');
		});
	});

	//当年级改变时加载所有学院
	function bjcxyear(){
		var year=$('#bjyear').val();
		  $('#bjprofesion,#search_college').html('<option style="display: none;"></option>');
		  $.post('tbclass/getCollege',{year:year},function(data){
			  for (var i = 0; i < data.length; i++){
				  $('#search_college').append("<option value=" + data[i] + "> "+data[i] +"</option>"); 
			  }
			  $('#bjprofesion,#search_college').selectpicker('refresh');
		  });
	}

	//当学院改变时加载所有专业
	function bjcxprofesion(){
		  var year=$('#bjyear').val();
    	  var college=$('#search_college').val();

		$('#bjprofesion').html('<option style="display: none;"></option>');
		 $.post('tbclass/getProfesion',{year:year,college:college},function(data){
   		  for (var i = 0; i < data.length; i++){
   			  $('#bjprofesion').append("<option value=" + data[i] + "> "+data[i] +"</option>"); 
   		  }
   		  $('#bjprofesion').selectpicker('refresh');
   	  });
	}
	
	function djbanji(){
		$('#bjcx').attr('disabled',false);
	}
	
	//清空查询中的bootselect下拉框
	function cleanSearch(){
		var searchs = $('#class_search').find('div.modal-body').find('select.selectpicker');
		for(var i=0;i<searchs.length;i++){
			if(searchs[i].name=='year'){	
				$(searchs[i]).selectpicker('val','');
				continue;
			}
			$(searchs[i]).html('<option style="display: none"></option>');
			$(searchs[i]).selectpicker('refresh');
		} 
		
	}
</script>

